<template>
  <div class="model-info-pop">
      <div  v-for="(el,index) in list" :key='index'>
          <div class="custom-popup" :style='el.myStyle' v-if="el.show">
              <div class='popup-arrow'></div>
              <div class='content'>
                  <div class="title">{{el.name}}</div>
                  <div class="box">
                    <div class="info-box temperature">
                        <span  class="label">温度：</span>
                        <span class="value">{{el.attrInfo.temperature ? el.attrInfo.temperature :0}}℃</span>
                    </div>
                    <div class="info-box pressure">
                        <span class="label">压强：</span>
                        <span class="value">{{el.attrInfo.pressure ? el.attrInfo.pressure :0}}Pa</span>
                    </div>
                    <div class="info-box humidity">
                        <span class="label">湿度：</span>
                        <span class="value">{{el.attrInfo.humidity ? el.attrInfo.humidity :0}}hPA</span>
                    </div>
                    <div class="info-box mach">
                        <span  class="label">马赫：</span>
                        <span class="value">{{el.attrInfo.mach ? el.attrInfo.mach :0}}</span>
                    </div>
                    <div class="info-box gas">
                        <span class="label">油量：</span>
                        <span class="value">{{el.attrInfo.gas ? el.attrInfo.gas :0}}</span>
                    </div>
                    <div class="info-box pitch">
                        <span class="label">俯仰角：</span>
                        <span class="value">{{el.attrInfo.pitch ? el.attrInfo.pitch :0}}</span>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
// import {vm,SEND} from '../../utils/eventManage'
export default {
    name:'infoPop',
  components: {},
  props:['popList'],
  data() {
    return {
        // myStyle:{
        //     left:0,
        //     right:0,
        //     display:'none'
        // },
        list:[]
    };
  },
  computed: {},
  watch: {
      popList:(list)=>{
          this.list=list;
      }
  },
  mounted() {
    this.list=this.popList
  },
  methods: {

  },
  created() {
  }
};
</script>
<style lang="less" scoped>
.model-info-pop{
    position: absolute;
    z-index: 10;
   .custom-popup{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
   }
       .popup-arrow{
        display: inline-block;
        width: 56px;
        height: 47px;
        background: url('../../assets/img/popup-arrow.png');
    } 
    .content{
        position:absolute;
        display: inline-block;
        width: 217px ;
        height: 144px ;
        background: url('../../assets/img/popup-bg.png');
        top: -100px;
             color: #00FFFF;

        .title{
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            top: 20px;
            left: 60px;
        }
        .info-box{
            display: flex;
            align-content: center;
            margin-bottom: 10px;
            line-height: 2px;
        }
        .box{
            position: absolute;
            top: 50px;
            left: 40px;
        }
    }
}
</style>
